<template>
  <div class="wrapper" id="wrapper">
    <!-- <SketchRule
      :lang="lang"
      :thick="thick"
      :scale="scale"
      :width="width"
      :height="height"
      :startX="startX"
      :startY="startY"
      :shadow="shadow"
      :horLineArr="lines.h"
      :verLineArr="lines.v"
      :cornerActive="true"
      :isShowReferLine="isShowReferLine"
      @handleLine="handleLine"
      @onCornerClick="handleCornerClick"
    >
    </SketchRule> -->
    <div
      ref="screensRef"
      id="screens"
      @wheel="handleWheel"
      @scroll="handleScroll"
    >
      <div ref="containerRef" class="screen-container">
        <div id="canvas" :style="canvasStyle">
          <!-- <PanelGrid :pageSize="pageSize" /> -->
          <slot name="butterfly"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SketchRule from "vue-sketch-ruler";
import PanelGrid from "./panel-grid.vue";

const rectWidth = 5000;
const rectHeight = 3000;

export default {
  data() {
    return {
      // 标尺参数
      scale: 1, //658813476562495, //1,
      startX: 0,
      startY: 0,
      lines: {
        h: [100, 200],
        v: [100, 200],
      },
      thick: 20,
      width: 5000,
      height: 3000,
      lang: "zh-CN", // 中英文
      isShowRuler: true, // 显示标尺
      isShowReferLine: false, // 显示参考线

      // 网格窗口大小与标尺画布一致
      pageSize: {
        width: rectWidth,
        height: rectHeight,
      },
    };
  },
  components: {
    SketchRule,
    PanelGrid,
  },
  computed: {
    shadow() {
      return {
        x: 0,
        y: 0,
        width: rectWidth,
        height: rectHeight,
      };
    },
    canvasStyle() {
      return {
        width: rectWidth + "px",
        height: rectHeight + "px",
        transform: `scale(${this.scale})`,
      };
    },
  },
  methods: {
    handleLine(lines) {
      this.lines = lines;
    },
    handleCornerClick() {
      return;
    },
    handleScroll() {
      const screensRect = document
        .querySelector("#screens")
        .getBoundingClientRect();
      const canvasRect = document
        .querySelector("#canvas")
        .getBoundingClientRect();
      // 标尺开始的刻度
      const startX =
        (screensRect.left + this.thick - canvasRect.left) / this.scale;
      const startY =
        (screensRect.top + this.thick - canvasRect.top) / this.scale;
      this.startX = startX >> 0;
      this.startY = startY >> 0;
    },
    // 控制缩放值
    handleWheel(e) {
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        const nextScale = parseFloat(
          Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2)
        );
        this.scale = nextScale;
      }
      this.$nextTick(() => {
        this.handleScroll();
      });
    },
    initSize() {
      const wrapperRect = document
        .querySelector("#wrapper")
        .getBoundingClientRect();
      const borderWidth = 1;
      this.width = wrapperRect.width - this.thick - borderWidth;
      this.height = wrapperRect.height - this.thick - borderWidth;
    },
  },
  mounted() {
    // 滚动居中
    this.$refs.screensRef.scrollLeft =
      this.$refs.containerRef.getBoundingClientRect().width / 2 - 300; // 300 = #screens.width / 2
    this.$nextTick(() => {
      this.initSize();
    });
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden;
}
body * {
  box-sizing: border-box;
  user-select: none;
}
.wrapper {
  background-color: #f5f5f5;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 1px solid #dadadc;
  height: calc(100% - 2px);
}
#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.screen-container {
  position: absolute;
  width: 5000px;
  height: 3000px;
}
.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}
.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}
.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}
.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}
#canvas {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 100%; /* 使用百分比宽度，或者根据需要调整 */
  height: 100%; /* 使用百分比高度，或者根据需要调整 */
  transform-origin: 50% 0;
}
</style>